<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="statisticsList">
      <el-table-column label="问题类型" align="center" prop="dictLable" />
      <el-table-column label="问题数量" align="center" prop="anyCount" />
      <el-table-column label="已解决" align="center" prop="resolvedCount" />
      <el-table-column label="数量占比" align="center">
        <template slot-scope="scope">
          {{ scope.row.anyCount !== 0 ? (scope.row.resolvedCount / scope.row.anyCount * 100).toFixed(2) + '%' : '0.00%'
          }}
        </template>
      </el-table-column>
    </el-table>

    <div class="echartbox">
      <div class="echart" ref="mychart" id="mychart" :style="{ float: 'left', width: '50%', height: '617px' }"></div>
      <div class="echart" ref="myPancakechart" id="myPancakechart" :style="{ float: 'left', width: '45%', height: '617px' }"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getStatistics } from "@/api/system/statistics";
export default {
  name: "statistics",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 问题反映表格数据
      statisticsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示流程信息弹出层
      infoOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        enterpriseId: null,
        title: null,
        type: null,
        content: null,
        resolved: null,
        createName: null,
        updateName: null,
      },
      // 表单参数
      form: {},
      // 流程信息表单参数
      infoForm: {},
      // 表单校验
      rules: {},
      // 企业字典表
      enterpriseDict: [],
      // 问题是否已解决
      resolved: [
        { name: "未解决", id: 0 },
        { name: "已解决", id: 1 },
      ],
      // 流程控制中的企业信息
      enterprise: {},
      // 问题流程控制
      questionSchedules: [],
      fileList: [],
      columnar: {
        xarr: [],
        quenumarr: [],
        overnumarr: [],
      },
      pancakearr:[]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 获取统计数据 */
    getList() {
      this.loading = true;
      getStatistics().then((response) => {
        this.statisticsList = response.data;
        console.log(this.statisticsList);
        let anyCountsum = 0
        let resolvedCountsum = 0
        this.statisticsList.forEach(element => {
          anyCountsum += element.anyCount
          resolvedCountsum += element.resolvedCount
          this.columnar.xarr.push(element.dictLable)
          this.columnar.quenumarr.push(element.anyCount)
          this.columnar.overnumarr.push(element.resolvedCount)
          let pancakearrobj = {
            value:element.anyCount,
            name:element.dictLable
          }
          this.pancakearr.push(pancakearrobj)
        });
        let obj = {
          dictLable: '合计',
          anyCount: anyCountsum,
          resolvedCount: resolvedCountsum
        }
        this.statisticsList.push(obj)
        this.total = response.total;
        this.initEcharts()
        this.initPancakeEcharts()
        this.loading = false;
      });
    },
    // echarts柱状图表配置
    initEcharts() {
      const option = {
        title: {
          text: "柱状统计图",
          textStyle: {
            color: "#303033", // 设置标题文本颜色为蓝色
            fontSize: 18, // 设置标题文本字体大小
            // 其他标题文本样式设置
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['问题数量', '已解决']
        },
        xAxis: [
          {
            type: 'category',
            data: this.columnar.xarr,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '已解决',
            min: 0,
            interval: 50,
            axisLabel: {
              formatter: '{value} 个'
            }
          },
        ],
        series: [
          {
            name: '问题数量',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + '个';
              }
            },
            data: this.columnar.quenumarr
          },
          {
            name: '已解决',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + '个';
              }
            },
            data: this.columnar.overnumarr
          },
        ]
      };
      const myChart = echarts.init(this.$refs.mychart); // 图标初始化
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },


    // echarts饼状图配置
    initPancakeEcharts() {
      const option = {
        title: {
          text: '问题数量统计',
          subtext: 'Statistics on the number of Problems',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        label: {
              show: true,
              fontSize: 16,
              position: "outside", // 将标签位置设置为外部
              alignTo: "labelLine", // 与引导线对齐
              formatter: "{b} : {c}", // 使用 formatter 自定义标签格式，{a}（系列名），{b}（数据名），{c}（数据值）
            },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.pancakearr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      const myChart = echarts.init(this.$refs.myPancakechart); // 图标初始化
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.block {
  margin-top: 30px;

  .blockcard {
    position: relative;

    .blockimg {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
}

.files {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;

  .fileimg {
    padding-left: 10px;
    width: 140px;
  }
}

::v-deep .el-select {
  width: 100%;
}

.blockinput {
  border: 1px #dbdbdb solid;
  width: 800px;
  height: 40px;
  padding-left: 10px;
}

.blockinput:focus {
  border: 2px solid #dbdbdb;
  /* 设置输入框获得焦点时的边框颜色和粗细 */
  outline: none;
  /* 去除输入框的默认轮廓样式 */
  box-shadow: 0 0 5px #dbdbdb;
  /* 设置输入框获得焦点时的阴影效果 */
}

.echartbox {
  margin-top: 42px;
  display: flex;
  justify-content: space-between;
}
</style>